<template>
  <view
    class="gui-flex gui-row gui-nowrap gui-align-items-center gui-flex1"
    :class="customClass"
    :style="{
      height: height,
      borderRadius: borderRadius,
    }"
  >
    <text
      class="gui-icons gui-block gui-text-center gui-color-gray"
      :style="{
        fontSize: iconFontSize,
        lineHeight: height,
        width: iconWidth,
        marginLeft: '12rpx',
      }"
      @tap.stop="tapme"
    >
      <slot name="leftIcon">&#xe604;</slot>
    </text>
    <!-- #ifdef APP-NVUE -->
    <input
      v-if="!disabled"
      v-model="inputVal"
      class="gui-search-input gui-flex1 gui-primary-text"
      :placeholder="placeholder"
      :style="{
        height: inputHeight,
        lineHeight: inputHeight,
        fontSize: inputFontSize,
      }"
      :type="type"
      @confirm="confirm"
      @input="inputting"
    />
    @focus="focusChange"
    <!-- #endif -->
    <!-- #ifndef APP-NVUE -->
    <input
      v-if="!disabled"
      v-model="inputVal"
      class="gui-search-input gui-flex1 gui-primary-text"
      :focus="focus"
      :placeholder="placeholder"
      :placeholder-class="placeholderClass"
      :style="{
        height: inputHeight,
        lineHeight: inputHeight,
        fontSize: inputFontSize,
      }"
      :type="type"
      @confirm="confirm"
      @focus="focusChange"
      @input="inputting"
    />
    <!-- #endif -->
    <text
      v-if="disabled"
      class="gui-search-input gui-flex1 gui-block gui-color-gray"
      :style="{
        height: inputHeight,
        lineHeight: inputHeight,
        fontSize: inputFontSize,
      }"
      @tap.stop="tapme"
    >
      {{ placeholder }}
    </text>
    <text
      v-if="inputVal.length > 0 && clearBtn"
      class="gui-search-icon gui-icons gui-block gui-text-center gui-color-gray"
      :style="{
        fontSize: iconFontSize,
        lineHeight: height,
        width: iconWidth,
        marginRight: '5rpx',
      }"
      @tap.stop="clearKwd"
    >
      &#xe78a;
    </text>
  </view>
</template>
<script>
export default {
  name: 'GuiSearch',
  props: {
    height: { type: String, default: '66rpx' },
    customClass: {
      type: Array,
      default: function () {
        return ['gui-bg-gray', 'gui-dark-bg-level-3']
      },
    },
    fontSize: { type: String, default: '28rpx' },
    iconWidth: { type: String, default: '70rpx' },
    iconFontSize: { type: String, default: '30rpx' },
    inputHeight: { type: String, default: '30rpx' },
    inputFontSize: { type: String, default: '26rpx' },
    placeholder: { type: String, default: '关键字' },
    placeholderClass: { type: String, default: '' },
    kwd: { type: String, default: '' },
    borderRadius: { type: String, default: '66rpx' },
    disabled: { type: Boolean, default: false },
    focus: { type: Boolean, default: false },
    clearBtn: { type: Boolean, default: true },
    type: { type: String, default: 'text' },
  },
  emits: ['clear', 'confirm', 'tapme', 'inputting', 'focus'],
  data() {
    return {
      inputVal: '',
    }
  },
  watch: {
    kwd: function (val, vo) {
      this.inputVal = val
    },
  },
  created: function () {
    this.inputVal = this.kwd
  },
  methods: {
    clearKwd: function () {
      this.inputVal = ''
      this.$emit('clear', '')
    },
    inputting: function (e) {
      this.$emit('inputting', e.detail.value)
    },
    confirm: function (e) {
      this.$emit('confirm', e.detail.value)
      uni.hideKeyboard()
    },
    tapme: function () {
      this.$emit('tapme')
    },
    focusChange: function () {
      this.$emit('focus')
    },
  },
}
</script>
<style scoped>
.gui-search-input {
  width: 100rpx;
  border-width: 0rpx;
  padding: 0;
  background-color: rgba(255, 255, 255, 0);
}
</style>
